<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人中心 - 快答答题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(90deg, #2575fc, #6a11cb);
            --primary-color: #2575fc;
            --secondary-color: #6a11cb;
            --text-color: #333;
            --light-text: #7f8c8d;
            --background: linear-gradient(135deg, #f5f7fa, #e6f0ff);
            --card-bg: #ffffff;
            --card-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            --error-color: #ff4757;
            --success-color: #2ed573;
            --transition: all 0.3s ease;
        }

        .dark-theme {
            --primary-gradient: linear-gradient(90deg, #8a2be2, #4b0082);
            --primary-color: #8a2be2;
            --secondary-color: #4b0082;
            --text-color: #f0f0f0;
            --light-text: #b0b0b0;
            --background: linear-gradient(135deg, #1a1a2e, #16213e);
            --card-bg: #1e293b;
            --card-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            --error-color: #ff6b81;
            --success-color: #7bed9f;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            transition: background 0.5s ease, color 0.3s ease;
        }
        
        body {
            background: var(--background);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
            padding-bottom: 70px;
        }
        
        /* 统一标题栏样式 */
        #header {
            background: var(--primary-gradient);
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header_con {
            display: flex;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .theme-toggle {
            position: absolute;
            right: 10px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 20px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .theme-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(30deg);
        }
        
        .top_tit {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        /* 主内容区域 */
        #content_div_b {
            max-width: 800px;
            margin: 20px auto;
            padding: 15px;
        }
        
        /* 用户信息卡片 */
        .user-card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            animation: fadeIn 0.6s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .user-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .user-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--primary-gradient);
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--primary-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 32px;
            margin-right: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .avatar-edit {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 28px;
            height: 28px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            cursor: pointer;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-info h2 {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 8px;
        }
        
        .user-info p {
            font-size: 16px;
            color: var(--light-text);
        }
        
        /* 设置项卡片 */
        .settings-card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 0;
            box-shadow: var(--card-shadow);
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            animation: fadeIn 0.6s ease 0.2s forwards;
            opacity: 0;
        }
        
        .settings-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: var(--primary-gradient);
        }
        
        .settings-header {
            padding: 18px 20px;
            border-bottom: 1px solid rgba(37, 117, 252, 0.1);
            font-size: 18px;
            font-weight: 600;
            color: var(--primary-color);
            display: flex;
            align-items: center;
        }
        
        .settings-header i {
            margin-right: 10px;
            font-size: 20px;
        }
        
        .settings-list {
            list-style: none;
        }
        
        .settings-item {
            display: flex;
            align-items: center;
            padding: 18px 20px;
            border-bottom: 1px solid rgba(37, 117, 252, 0.1);
            transition: var(--transition);
            cursor: pointer;
        }
        
        .settings-item:hover {
            background: rgba(37, 117, 252, 0.03);
        }
        
        .settings-item:last-child {
            border-bottom: none;
        }
        
        .item-icon {
            width: 36px;
            height: 36px;
            background: rgba(37, 117, 252, 0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: var(--primary-color);
            font-size: 18px;
            transition: var(--transition);
        }
        
        .settings-item:hover .item-icon {
            background: var(--primary-gradient);
            color: white;
            transform: scale(1.1);
        }
        
        .item-content {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .item-content h3 {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-color);
        }
        
        .item-value {
            font-size: 15px;
            color: var(--light-text);
            display: flex;
            align-items: center;
        }
        
        .item-arrow {
            margin-left: 10px;
            color: var(--light-text);
            font-size: 14px;
            transition: transform 0.3s ease;
        }
        
        .settings-item:hover .item-arrow {
            color: var(--primary-color);
            transform: translateX(3px);
        }
        
        /* 开关按钮样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background: var(--primary-gradient);
        }
        
        input:checked + .slider:before {
            transform: translateX(24px);
        }
        
        /* 震动图标动画 */
        .vibrate-icon {
            position: relative;
        }
        
        .vibrate-icon.active {
            animation: vibrate 0.5s linear infinite;
        }
        
        @keyframes vibrate {
            0% { transform: translateX(0) rotate(0); }
            20% { transform: translateX(-2px) rotate(-5deg); }
            40% { transform: translateX(2px) rotate(5deg); }
            60% { transform: translateX(-2px) rotate(-5deg); }
            80% { transform: translateX(2px) rotate(5deg); }
            100% { transform: translateX(0) rotate(0); }
        }
        
        /* 退出按钮 */
        .logout-btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: var(--card-bg);
            border: none;
            border-radius: 16px;
            font-size: 16px;
            font-weight: 600;
            color: var(--error-color);
            text-align: center;
            box-shadow: var(--card-shadow);
            margin-top: 20px;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            animation: fadeIn 0.6s ease 0.4s forwards;
            opacity: 0;
        }
        
        .logout-btn:hover {
            background: rgba(255, 71, 87, 0.05);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 71, 87, 0.15);
        }
        
        .logout-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }
        
        .logout-btn:hover::before {
            left: 100%;
        }
        
        /* 弹出框样式 */
        .bigbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(3px);
        }
        
        .box {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 25px;
            width: 90%;
            max-width: 400px;
            z-index: 1001;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transform: translateY(20px);
            opacity: 0;
            animation: popupIn 0.4s ease forwards;
        }
        
        @keyframes popupIn {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .popup-header {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .popup-header h2 {
            color: var(--text-color);
            margin-bottom: 8px;
        }
        
        .popup-header p {
            color: var(--light-text);
        }
        
        .popup-content {
            margin: 25px 0;
        }
        
        .popup-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid rgba(37, 117, 252, 0.2);
            border-radius: 10px;
            font-size: 16px;
            outline: none;
            transition: var(--transition);
            margin-bottom: 15px;
            background: rgba(37, 117, 252, 0.05);
            color: var(--text-color);
        }
        
        .popup-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.2);
        }
        
        .input-hint {
            color: var(--light-text);
            font-size: 14px;
            margin-top: 5px;
        }
        
        /* 地区选择样式 */
        .region-row {
            display: flex;
            margin-bottom: 15px;
        }
        
        .region-select {
            flex: 1;
            padding: 12px 15px;
            background: rgba(37, 117, 252, 0.05);
            border: 1px solid rgba(37, 117, 252, 0.2);
            border-radius: 10px;
            font-size: 15px;
            color: var(--text-color);
            outline: none;
            cursor: pointer;
            margin: 0 5px;
        }
        
        /* 性别选择样式 */
        .gender-selection {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }
        
        .gender-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            padding: 15px;
            border-radius: 12px;
            transition: var(--transition);
        }
        
        .gender-option:hover {
            background: rgba(37, 117, 252, 0.05);
        }
        
        .gender-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(37, 117, 252, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--primary-color);
            margin-bottom: 10px;
            transition: var(--transition);
        }
        
        .gender-option.active .gender-icon {
            background: var(--primary-gradient);
            color: white;
        }
        
        .gender-option h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-color);
        }
        
        .true-bigbox {
            display: block;
            width: 100%;
            padding: 12px;
            background: var(--primary-gradient);
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: 600;
            color: white;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 10px rgba(37, 117, 252, 0.3);
        }
        
        .true-bigbox:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(37, 117, 252, 0.4);
        }
        
        /* 统一底部导航栏样式 */
        .bottom_box {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--card-bg);
            display: flex;
            padding: 10px 0;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .tab_bar {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
        }
        
        .tab_bar:hover {
            transform: translateY(-5px);
        }
        
        .tab_bar i {
            font-size: 22px;
            margin-bottom: 4px;
            display: block;
            margin: 0 auto 5px;
            color: var(--light-text);
            transition: var(--transition);
        }
        
        .tab_bar p {
            font-size: 12px;
            color: var(--light-text);
            transition: var(--transition);
        }
        
        .tab_bar.active i {
            color: var(--primary-color);
        }
        
        .tab_bar.active p {
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .tab_bar.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background: var(--primary-color);
            border-radius: 2px;
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .user-card {
                flex-direction: column;
                text-align: center;
                padding: 20px;
            }
            
            .user-avatar {
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            .settings-item {
                padding: 15px;
            }
            
            .item-icon {
                width: 32px;
                height: 32px;
                font-size: 16px;
            }
            
            .box {
                padding: 20px;
            }
            
            .region-row {
                flex-direction: column;
            }
            
            .region-select {
                margin: 5px 0;
            }
        }
        
        /* 新增退出确认弹窗 */
        .logout-confirm {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .logout-box {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 30px;
            width: 90%;
            max-width: 350px;
            z-index: 1001;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
            animation: popupIn 0.4s ease forwards;
        }
        
        .logout-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 71, 87, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 36px;
            color: var(--error-color);
        }
        
        .logout-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 15px;
        }
        
        .logout-btn-confirm {
            flex: 1;
            padding: 12px;
            background: var(--error-color);
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .logout-btn-cancel {
            flex: 1;
            padding: 12px;
            background: rgba(241, 242, 246, 0.2);
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-color);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .logout-btn-confirm:hover {
            background: #ff2e43;
            transform: translateY(-2px);
        }
        
        .logout-btn-cancel:hover {
            background: rgba(223, 228, 234, 0.2);
            transform: translateY(-2px);
        }
        
        /* 关于页面链接样式 */
        .about-link {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 标题栏 -->
    <header id="header">
        <div class="header_con">
            <div class="top_tit">个人中心</div>
            <button class="theme-toggle" id="themeToggle">
                <i class="fas fa-moon"></i>
            </button>
        </div>
    </header>

    <!-- 主内容区 -->
    <div id="content_div_b">
        <!-- 用户信息卡片 -->
        <div class="user-card">
            <div class="user-avatar">
                <img src="images/头像3.webp" alt="用户头像">
                <div class="avatar-edit" title="修改头像">
                    <i class="fas fa-camera"></i>
                </div>
            </div>
            <div class="user-info">
                <h2 id="username">悲伤的企鹅</h2>
                <p>微信未绑定</p>
            </div>
        </div>
        
        <!-- 个人信息设置卡片 -->
        <div class="settings-card">
            <div class="settings-header">
                <i class="fas fa-user-cog"></i>
                <span>个人信息设置</span>
            </div>
            <ul class="settings-list">
                <li class="settings-item" onclick="showNamePopup()">
                    <div class="item-icon">
                        <i class="fas fa-signature"></i>
                    </div>
                    <div class="item-content">
                        <h3>昵称</h3>
                        <div class="item-value">
                            <span id="nickname">悲伤的企鹅</span>
                            <i class="fas fa-chevron-right item-arrow"></i>
                        </div>
                    </div>
                </li>
                
                <li class="settings-item" onclick="showWechatPopup()">
                    <div class="item-icon">
                        <i class="fab fa-weixin"></i>
                    </div>
                    <div class="item-content">
                        <h3>微信号</h3>
                        <div class="item-value">
                            <span id="wechat">未绑定</span>
                            <i class="fas fa-chevron-right item-arrow"></i>
                        </div>
                    </div>
                </li>
                
                <li class="settings-item" onclick="showGenderPopup()">
                    <div class="item-icon">
                        <i class="fas fa-venus-mars"></i>
                    </div>
                    <div class="item-content">
                        <h3>性别</h3>
                        <div class="item-value">
                            <span id="gender">男</span>
                            <i class="fas fa-chevron-right item-arrow"></i>
                        </div>
                    </div>
                </li>
                
                <li class="settings-item" onclick="showRegionPopup()">
                    <div class="item-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="item-content">
                        <h3>地区</h3>
                        <div class="item-value">
                            <span id="region">安徽省 六安市</span>
                            <i class="fas fa-chevron-right item-arrow"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        
        <!-- 通知设置卡片 -->
        <div class="settings-card">
            <div class="settings-header">
                <i class="fas fa-bell"></i>
                <span>通知设置</span>
            </div>
            <ul class="settings-list">
                <li class="settings-item">
                    <div class="item-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="item-content">
                        <h3>答题提醒时间</h3>
                        <div class="item-value">
                            <span>20:00</span>
                        </div>
                    </div>
                </li>
                
                <li class="settings-item">
                    <div class="item-icon">
                        <i class="fas fa-wave-square vibrate-icon" id="vibrateIcon"></i>
                    </div>
                    <div class="item-content">
                        <h3>震动提醒</h3>
                        <div class="item-value">
                            <label class="switch">
                                <input type="checkbox" id="vibrateSwitch" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </li>
                
                <li class="settings-item">
                    <div class="item-icon">
                        <i class="fas fa-music"></i>
                    </div>
                    <div class="item-content">
                        <h3>声音提醒</h3>
                        <div class="item-value">
                            <label class="switch">
                                <input type="checkbox" id="soundSwitch" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        
        <!-- 关于我们卡片 -->
        <div class="settings-card">
            <div class="settings-header">
                <i class="fas fa-info-circle"></i>
                <span>关于我们</span>
            </div>
            <ul class="settings-list">
                <li class="settings-item about-link" onclick="goToAboutPage()">
                    <div class="item-icon">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <div class="item-content">
                        <h3>关于快答答题</h3>
                        <div class="item-value">
                            <i class="fas fa-chevron-right item-arrow"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        
        <!-- 退出按钮 -->
        <button class="logout-btn" onclick="showLogoutConfirm()">退出登录</button>
    </div>
    
    <!-- 退出确认弹窗 -->
    <div class="logout-confirm" id="logoutConfirm">
        <div class="logout-box">
            <div class="logout-icon">
                <i class="fas fa-sign-out-alt"></i>
            </div>
            <h2>确定要退出吗？</h2>
            <p>退出后将无法使用个人中心功能</p>
            <div class="logout-actions">
                <button class="logout-btn-cancel" onclick="closeLogoutConfirm()">取消</button>
                <button class="logout-btn-confirm" onclick="logout()">确定退出</button>
            </div>
        </div>
        <div class="mask" onclick="closeLogoutConfirm()"></div>
    </div>
    
    <!-- 统一底部导航 -->
    <div class="bottom_box">
        <div class="tab_bar" onclick="window.location.href='index.html';">
            <i class="fas fa-home"></i>
            <p>首页</p>
        </div>
        <div class="tab_bar" onclick="window.location.href='integral.html';">
            <i class="fas fa-coins"></i>
            <p>积分</p>
        </div>
        <div class="tab_bar" onclick="window.location.href='personal-callme.html';">
            <i class="fas fa-headset"></i>
            <p>联系我们</p>
        </div>
        <div class="tab_bar active">
            <i class="fas fa-user"></i>
            <p>我的</p>
        </div>
    </div>
    
    <!-- 昵称修改弹出框 -->
    <div class="bigbox" id="namePopup">
        <div class="box">
            <div class="popup-header">
                <h2>修改昵称</h2>
                <p>请输入您的新昵称</p>
            </div>
            
            <div class="popup-content">
                <input type="text" id="newNickname" class="popup-input" 
                       placeholder="请输入新昵称" value="悲伤的企鹅">
                <p class="input-hint">昵称长度2-10个字符</p>
            </div>
            
            <button class="true-bigbox" onclick="saveNickname()">保存昵称</button>
        </div>
        <div class="mask" onclick="closePopup('namePopup')"></div>
    </div>
    
    <!-- 微信号修改弹出框 -->
    <div class="bigbox" id="wechatPopup">
        <div class="box">
            <div class="popup-header">
                <h2>绑定微信号</h2>
                <p>请输入您的微信号</p>
            </div>
            
            <div class="popup-content">
                <input type="text" id="newWechat" class="popup-input" 
                       placeholder="请输入微信号" value="未绑定">
                <p class="input-hint">微信号绑定后不可更改</p>
            </div>
            
            <button class="true-bigbox" onclick="saveWechat()">绑定微信号</button>
        </div>
        <div class="mask" onclick="closePopup('wechatPopup')"></div>
    </div>
    
    <!-- 性别选择弹出框 -->
    <div class="bigbox" id="genderPopup">
        <div class="box">
            <div class="popup-header">
                <h2>选择性别</h2>
                <p>请选择您的性别</p>
            </div>
            
            <div class="gender-selection">
                <div class="gender-option active" onclick="selectGender('male')">
                    <div class="gender-icon">
                        <i class="fas fa-mars"></i>
                    </div>
                    <h3>男</h3>
                </div>
                
                <div class="gender-option" onclick="selectGender('female')">
                    <div class="gender-icon">
                        <i class="fas fa-venus"></i>
                    </div>
                    <h3>女</h3>
                </div>
            </div>
            
            <button class="true-bigbox" onclick="saveGender()">保存性别</button>
        </div>
        <div class="mask" onclick="closePopup('genderPopup')"></div>
    </div>
    
    <!-- 地区选择弹出框 -->
    <div class="bigbox" id="regionPopup">
        <div class="box">
            <div class="popup-header">
                <h2>选择地区</h2>
                <p>请选择您所在的省份和城市</p>
            </div>
            
            <div class="popup-content">
                <div class="region-row">
                    <select class="region-select" id="province">
                        <option value="安徽省">安徽省</option>
                        <option value="北京市">北京市</option>
                        <option value="上海市">上海市</option>
                        <option value="江苏省">江苏省</option>
                        <option value="浙江省">浙江省</option>
                        <option value="广东省">广东省</option>
                        <option value="四川省">四川省</option>
                    </select>
                    
                    <select class="region-select" id="city">
                        <option value="合肥市">合肥市</option>
                        <option value="芜湖市">芜湖市</option>
                        <option value="蚌埠市">蚌埠市</option>
                        <option value="淮南市">淮南市</option>
                        <option value="马鞍山市">马鞍山市</option>
                        <option value="淮北市">淮北市</option>
                        <option value="铜陵市">铜陵市</option>
                        <option value="安庆市">安庆市</option>
                        <option value="黄山市">黄山市</option>
                        <option value="滁州市">滁州市</option>
                        <option value="阜阳市">阜阳市</option>
                        <option value="宿州市">宿州市</option>
                        <option value="六安市" selected>六安市</option>
                        <option value="亳州市">亳州市</option>
                        <option value="池州市">池州市</option>
                        <option value="宣城市">宣城市</option>
                    </select>
                </div>
            </div>
            
            <button class="true-bigbox" onclick="saveRegion()">保存地区</button>
        </div>
        <div class="mask" onclick="closePopup('regionPopup')"></div>
    </div>

    <script>
        // 当前用户数据
        let userData = {
            nickname: "悲伤的企鹅",
            wechat: "未绑定",
            gender: "男",
            region: "安徽省 六安市",
            vibrateEnabled: true,
            soundEnabled: true,
            darkMode: false
        };
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 设置我的页面为激活状态
            const myTab = document.querySelector('.bottom_box .tab_bar:nth-child(4)');
            myTab.classList.add('active');
            
            // 为底部导航添加点击效果
            const tabBars = document.querySelectorAll('.tab_bar');
            tabBars.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabBars.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 初始化用户数据
            document.getElementById('nickname').textContent = userData.nickname;
            document.getElementById('username').textContent = userData.nickname;
            document.getElementById('wechat').textContent = userData.wechat;
            document.getElementById('gender').textContent = userData.gender;
            document.getElementById('region').textContent = userData.region;
            
            // 初始化开关状态
            document.getElementById('vibrateSwitch').checked = userData.vibrateEnabled;
            document.getElementById('soundSwitch').checked = userData.soundEnabled;
            
            // 震动图标状态
            updateVibrateIcon();
            
            // 头像编辑提示
            document.querySelector('.avatar-edit').addEventListener('click', function() {
                showNotification('头像修改功能已开放');
            });
            
            // 震动开关事件
            document.getElementById('vibrateSwitch').addEventListener('change', function() {
                userData.vibrateEnabled = this.checked;
                updateVibrateIcon();
                
                if (this.checked) {
                    showNotification('震动提醒已开启');
                    simulateVibration();
                } else {
                    showNotification('震动提醒已关闭');
                }
            });
            
            // 声音开关事件
            document.getElementById('soundSwitch').addEventListener('change', function() {
                userData.soundEnabled = this.checked;
                if (this.checked) {
                    showNotification('声音提醒已开启');
                } else {
                    showNotification('声音提醒已关闭');
                }
            });
            
            // 主题切换事件
            document.getElementById('themeToggle').addEventListener('click', function() {
                userData.darkMode = !userData.darkMode;
                if (userData.darkMode) {
                    document.documentElement.classList.add('dark-theme');
                    this.innerHTML = '<i class="fas fa-sun"></i>';
                    showNotification('深色模式已开启');
                } else {
                    document.documentElement.classList.remove('dark-theme');
                    this.innerHTML = '<i class="fas fa-moon"></i>';
                    showNotification('浅色模式已开启');
                }
            });
        });
        
        
        // 显示弹出框
        function showPopup(id) {
            document.getElementById(id).style.display = 'flex';
        }
        
        // 关闭弹出框
        function closePopup(id) {
            document.getElementById(id).style.display = 'none';
        }
        
        // 显示退出确认弹窗
        function showLogoutConfirm() {
            document.getElementById('logoutConfirm').style.display = 'flex';
        }
        
        // 关闭退出确认弹窗
        function closeLogoutConfirm() {
            document.getElementById('logoutConfirm').style.display = 'none';
        }
        
        // 显示昵称修改弹出框
        function showNamePopup() {
            document.getElementById('newNickname').value = userData.nickname;
            showPopup('namePopup');
        }
        
        // 保存昵称
        function saveNickname() {
            const newName = document.getElementById('newNickname').value.trim();
            if (newName.length < 2 || newName.length > 10) {
                showNotification('昵称长度需在2-10个字符之间');
                return;
            }
            
            userData.nickname = newName;
            document.getElementById('nickname').textContent = newName;
            document.getElementById('username').textContent = newName;
            closePopup('namePopup');
            showNotification('昵称已更新');
        }
        
        // 显示微信号修改弹出框
        function showWechatPopup() {
            document.getElementById('newWechat').value = userData.wechat;
            showPopup('wechatPopup');
        }
        
        // 保存微信号
        function saveWechat() {
            const newWechat = document.getElementById('newWechat').value.trim();
            if (newWechat.length < 3) {
                showNotification('微信号至少需要3个字符');
                return;
            }
            
            userData.wechat = newWechat;
            document.getElementById('wechat').textContent = newWechat;
            closePopup('wechatPopup');
            showNotification('微信号已绑定');
        }
        
        // 显示性别选择弹出框
        function showGenderPopup() {
            showPopup('genderPopup');
        }
        
        // 选择性别
        function selectGender(gender) {
            const options = document.querySelectorAll('.gender-option');
            options.forEach(option => option.classList.remove('active'));
            
            if (gender === 'male') {
                options[0].classList.add('active');
            } else {
                options[1].classList.add('active');
            }
        }
        
        // 保存性别
        function saveGender() {
            const selected = document.querySelector('.gender-option.active h3').textContent;
            userData.gender = selected;
            document.getElementById('gender').textContent = selected;
            closePopup('genderPopup');
            showNotification('性别已更新');
        }
        
        // 显示地区选择弹出框
        function showRegionPopup() {
            showPopup('regionPopup');
        }
        
        // 保存地区
        function saveRegion() {
            const province = document.getElementById('province').value;
            const city = document.getElementById('city').value;
            const region = `${province} ${city}`;
            
            userData.region = region;
            document.getElementById('region').textContent = region;
            closePopup('regionPopup');
            showNotification('地区已更新');
        }
        
        // 跳转到关于页面
        function goToAboutPage() {
            // 添加跳转动画
            document.body.style.opacity = '0.8';
            document.body.style.transform = 'scale(0.95)';
            document.body.style.transition = 'all 0.5s ease';
            
            // 1秒后跳转到about页面
            setTimeout(() => {
                window.location.href = 'about.html';
            }, 500);
        }
        
        // 显示通知
        function showNotification(message) {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(37, 117, 252, 0.9);
                color: white;
                padding: 12px 25px;
                border-radius: 30px;
                box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
                z-index: 2000;
                opacity: 0;
                transition: opacity 0.3s, top 0.3s;
                white-space: nowrap;
                font-size: 16px;
            `;
            notification.textContent = message;
            document.body.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.style.opacity = '1';
                notification.style.top = '30px';
            }, 10);
            
            // 3秒后移除通知
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.top = '20px';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }
        
        // 退出登录
        function logout() {
            showNotification('您已成功退出登录');
            // 添加退出动画效果
            document.body.style.opacity = '0.8';
            document.body.style.transition = 'opacity 0.5s ease';
            
            // 1.5秒后跳转到登录页面
            setTimeout(() => {
                window.location.href = 'Sign_in.html';
            }, 1500);
        }
    </script>
</body>
</html>